<template>
  <div class="sign-in-subscribe-earnings">
    <c-title text="奖励记录"></c-title>
    <van-tabs v-model="current_active" @change="change_handle">
      <van-tab title="预约收益"></van-tab>
      <van-tab title="推荐奖"></van-tab>
      <van-tab title="购物津贴"></van-tab>
    </van-tabs>
    <div class="header">
      <div class="info">
        <div>
          <p>{{not_settlement_statistic}}</p>
          <p class="status">未结算</p>
        </div>
        <div>
          <p>{{already_settlement_statistic}}</p>
          <p class="status"> 已结算</p>
        </div>
      </div>
    </div>
    <div class="tab-state">
      <van-tabs v-model="active" @change="change">
        <van-tab title="全部"></van-tab>
        <van-tab title="未结算"></van-tab>
        <van-tab title="已结算"></van-tab>
      </van-tabs>

    </div>
    <template v-if="list && list.length>0">
      <van-cell-group>
        <van-cell v-for="(item,i) in list" :key="i" title-style="text-align:left;font-size:.75rem" value-class="f-12">
          <template #title>
            <p style="color: #080808;">{{item.activity_name}}</p>
            <div class="member" v-if="current_active == 1">
              <span>下级会员:</span>
              <div class="photo">
                <van-image round width="1rem" height="1rem" :src="item.member_child&&item.member_child.avatar_image||''" />
              </div>
              <span>{{item.member_child&&item.member_child.username||'--'}}</span>
            </div>
            <p style="color: #989898;">{{item.created_at}}</p>
          </template>
          <template #default>
            <p style="color: #080808;">{{item.dividend_amount}}</p>
            <p style="color: #101010;">{{item.status_name}}</p>
          </template>
        </van-cell>
      </van-cell-group>
    </template>
    <van-empty v-else description="暂无记录" />
  </div>
</template>

<script>
import { Image as VanImage } from 'vant';
import { scrollMixin } from '../../utils/mixin';
export default {
  mixins: [scrollMixin],
  components: { VanImage },
  data() {
    return {
      current_active: 0,
      active: 0,
      list: [],

      already_settlement_statistic: 0,
      not_settlement_statistic: 0,
      isLoadMore: true,
      current_page: 1,
      last_page: 0,
    };
  },

 async activated() {
    this.initData()
    await this.getData()
     await this.change()
  },
  methods: {
   async change_handle() {
     await this.getData()
     await this.change()
    },
   async change() {
      let json = {
        reward_type: this.current_active == 0 ? 'sign_profit' : this.current_active == 1 ? 'recommend_award' : 'allowance'
      },
        url = this.get_current_type({type:'page'});
      if (this.active !== 0) {
        json.status = this.active == 1 ? 0 : 1;
      }
      let { result, msg, data } = await $http.get(url, json);
      if (result == 0) return this.$toast(msg);
      this.list = data.data;
      this.current_page = data.current_page;
      this.last_page = data.last_page;
    },
    initData() {
      this.list = [];
      this.isLoadMore = true;
      this.current_page = 1;
      this.last_page = 1;
    },
    async getData() {
      let  url = this.get_current_type({type:'home'})
      let { result, msg, data: { already_settlement_statistic, not_settlement_statistic } } = await $http.get(url);
      if (result == 0) return this.$toast(msg);
      this.already_settlement_statistic = already_settlement_statistic;
      this.not_settlement_statistic = not_settlement_statistic;
    },
    get_current_type({ type }) {
      if(type == 'page'){
        return 'plugin.sign-buy.frontend.reward-detail.record-page'
      }
      if (this.current_active == 0) {
          return 'plugin.sign-buy.frontend.reward-detail.sign-profit';

      } else if (this.current_active == 1) {
          return 'plugin.sign-buy.frontend.reward-detail.recommend-award';
      } else {
          return 'plugin.sign-buy.frontend.reward-detail.allowance';
      }
    },
    async getMoreData() {
      this.isLoadMore = false;
      if (this.current_page >= this.last_page) {
        return;
      }
      let json = {
        reward_type: this.current_active == 0 ? 'sign_profit' : this.current_active == 1 ? 'recommend_award' : 'allowance'
      },
        url = this.get_current_type({ type: 'page' });
      json.page = this.current_page + 1;
      if (this.active !== 0) {
        json.status = this.active;
      }
      let { result, msg, data: { already_settlement_statistic, not_settlement_statistic, record } } = await $http.get(url, json);
      if (result == 0) return this.$toast(msg);
      this.list = this.list.concat(record.data);
      this.current_page = record.current_page;
      this.last_page = record.last_page;
      this.already_settlement_statistic = already_settlement_statistic;
      this.not_settlement_statistic = not_settlement_statistic;
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep .van-cell {
  justify-content: space-between;
  margin: 0.5rem 0;
  border-radius: 0.3125rem;
}

::v-deep .tab-state .van-tabs__nav {
  background-color: unset !important;
}

::v-deep .van-cell-group {
  margin-top: 0.625rem;
  background-color: unset;
  padding: 0 0.5rem;
}

.sign-in-subscribe-earnings {
  .photo {
    margin: 0 0.3rem;
    display: flex;
    align-items: center;
  }

  .member {
    color: #585858;
    display: flex;
    align-items: center;
  }

  .f-12 {
    font-size: 0.75rem;
  }

  .van-cell__title,
  .van-cell__value {
    flex: unset !important;
  }

  .status {
    margin-top: 0.25rem;
    font-size: 0.75rem;
  }

  .header {
    position: relative;
    height: 4.6875rem;
    margin-bottom: 3.75rem;
  }

  .info {
    position: absolute;
    top: 50%;
    left: 1rem;
    right: 1rem;
    transform: translateY(-10%);
    border-radius: 0.625rem;
    display: flex;
    justify-content: space-between;
    padding: 1.875rem 4.0625rem;
    background-image: linear-gradient(-50deg, #fe8b30 0%, #fbce68 100%);
    box-shadow: 0 0.625rem 0.9375rem 0 rgba(251, 166, 98, 0.2);
    color: #fff;

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      top: 31%;
      height: 2.25rem;
      width: 0.125rem;
      background: #f2f2f2;
    }
  }
}
</style>